<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../DataTables-1.9.4/media/css/demo_page2.css";
			@import "../DataTables-1.9.4/media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts-more.js"></script>
		<script src="../Highcharts-3.0.1/js/modules/exporting.js"></script>
		<script src="../TrackTables-0.0.1/tracktables_0.7.js"></script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				TrackTables Example
			</div>
			<h1>File selection</h1>
			<p>Please select files to summarise.</p>
			<input type="file" id="fileinput" multiple />

<script type="text/javascript">
	var RNAQCdata
	var processedCount=0; // global variable
	var totalFiles = 0;

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
    }

NameIndex = [0];
chartColnames = ["Name",
				"PF_BASES","PF_ALIGNED_BASES","RIBOSOMAL_BASES","CODING_BASES","UTR_BASES","INTRONIC_BASES","INTERGENIC_BASES","IGNORED_READS","CORRECT_STRAND_READS","INCORRECT_STRAND_READS","PCT_RIBOSOMAL_BASES","PCT_CODING_BASES","PCT_UTR_BASES","PCT_INTRONIC_BASES","PCT_INTERGENIC_BASES","PCT_MRNA_BASES","PCT_USABLE_BASES","PCT_CORRECT_STRAND_READS","MEDIAN_CV_COVERAGE","MEDIAN_5PRIME_BIAS","MEDIAN_3PRIME_BIAS","MEDIAN_5_TO_3_BIAS",

			   "1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"
			   ];

var IndexForLine = [23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122]

  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files;
    totalFiles = files.length;
    processedCount = 0
    if (files) {
    	var k = 0
        for (var i=0, f; f=files[i]; i++) {
        	RNAQCdata = new Array(files.length);
	          var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                	//var RNAQCdata[i] = new Array(9)
                    var text = e.target.result;
                      			//#var text = reader.result;
					  			//console.log(text)
					  			var n = text.split(/\r?\n/);
					  			var nSplit = n[7].split(/\t/);
					  			console.log(nSplit);
					  			Temp = new Array(123);
					  			Temp[0] = f.name
					  			Temp[1] = nSplit[0];
					  			Temp[2] = nSplit[1];
					  			Temp[3] = nSplit[2];
					  			Temp[4] = nSplit[3];
					  			Temp[5] = nSplit[4];
					  			Temp[6] = nSplit[5];
					  			Temp[7] = nSplit[6];
					  			Temp[8] = nSplit[7];
					  			Temp[9] = nSplit[8];
					  			Temp[10] = nSplit[9];
					  			Temp[11] = nSplit[10];
					  			Temp[12] = nSplit[11];
					  			Temp[13] = nSplit[12];
					  			Temp[14] = nSplit[13];
					  			Temp[15] = nSplit[14];
					  			Temp[16] = nSplit[15];
					  			Temp[17] = nSplit[16];
					  			Temp[18] = nSplit[17];
					  			Temp[19] = nSplit[18];
					  			Temp[20] = nSplit[19];
					  			Temp[21] = nSplit[20];
					  			Temp[22] = nSplit[21].replace(/\?/g, "NA");
								console.log(nSplit[21].replace(/\?/g, "NA"))
								for(j=0;j<101;j++)
								{
					  				var nSplit2 = n[11+j].split(/\t/);
									Temp[23+j] = nSplit2[1]
								//	console.log(nSplit2[1])

								}
					  			//console.log(k)
					  			//console.log(Temp)
								RNAQCdata[k] = Temp
								k = k+1
								//alert(RNAQCdata)
								onLoadEndHandler();
                    //alert(Temp)
                };
            })(f);
            r.readAsText(f);
        }
    } else {
	      alert("Failed to load files");
    }

  }
  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
function onLoadEndHandler(){
  processedCount++;
  if(processedCount == totalFiles){
  toggle_visibility("RNAcontainer")
    console.log(RNAQCdata)
    			dataTablew = make2dArrayForDataTable(chartColnames,RNAQCdata,[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],0)
				//temp = makeDataTable(dataTablew,"dynamic","example",functionAtRedraw,"")
				  $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
				    $('#example').dataTable( {
				        "aaData": dataTablew.aaData,
				        "aoColumns": dataTablew.aoColumns,
				        "aoColumnDefs":  [
							{
								"bSearchable": false,
								"bVisible": false,
								"aTargets": [2,3,4,5,6,7,8,9,10,13,14,15,16,17,18,19,20,21,22]},
							]
				        ,
				        "fnDrawCallback": functionAtRedraw
    				} ).fnFilterOnReturn();
    			dataTablex = make2dArrayForDataTable(chartColnames,RNAQCdata,[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],0)
				//temp = makeDataTable(dataTablex,"dynamic","example",functionAtRedraw,"")
				  $('#dynamic2').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2"></table>' );
				    $('#example2').dataTable( {
				        "aaData": dataTablex.aaData,
				        "aoColumns": dataTablex.aoColumns,
				        "aoColumnDefs":  [
							{
								"bSearchable": false,
								"bVisible": false,
								"aTargets": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]},
							]
				        ,
				        "fnDrawCallback": functionAtRedraw
    				} ).fnFilterOnReturn();
    			dataTablej = make2dArrayForDataTable(chartColnames,RNAQCdata,[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],0)
				  $('#dynamic3').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example3"></table>' );
				    $('#example3').dataTable( {
				        "aaData": dataTablej.aaData,
				        "aoColumns": dataTablej.aoColumns,
				        "aoColumnDefs":  [
							{
								"bSearchable": false,
								"bVisible": false,
								"aTargets": [1,2,3,4,5,6,7,8,9,10,11,16,17,18,19,20,21,22]},
							]
				        ,
				        "fnDrawCallback": functionAtRedraw
    				} ).fnFilterOnReturn();

			//	console.log(dataTablew.aaData)
						var oTable = $(".display").dataTable();
						var aHash = '#';
			//console.log(oTable)
			for(j=0;j<oTable.length;j++)
			{
				//console.log(oTable[j].id)
							tempID = aHash.concat(oTable[j].id,"_filter input")
							$(tempID).keyup( function () {
							//console.log(this.value)
							oTable.fnFilterAll(this.value);
							} );
						}
				Bubble = make2dArrayForHighChartsBar(chartColnames,RNAQCdata,[2,3,4],0)
			//	console.log(Bubble)
				makeHighChartBarGrouped(Bubble,"#container2")

			highChartline = make2dArrayForHighChartsLine(chartColnames,RNAQCdata,IndexForLine,0)
			//console.log(highChartline)
			makeHighChartLine(highChartline,"#container3")

			Bubble3 = make2dArrayForHighChartsBar(chartColnames,RNAQCdata,[11,12,13,14,15],0)
			//console.log(Bubble)
			makeHighChartBar(Bubble3,"#container4")



  }
}

$(document).ready(function() {
    $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
    $('#example').dataTable( {
        "aaData": [
            /* Reduced data set */
            ["NA"]

        ],
				        "aoColumns": "N",

				        } ).fnFilterOnReturn();






    $('#dynamic2').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2"></table>' );
    $('#example2').dataTable( {
        "aaData": [
            /* Reduced data set */
            ["NA"]

        ],
				        "aoColumns": "N"    } ).fnFilterOnReturn();


  $('#dynamic3').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example3"></table>' );
    $('#example3').dataTable( {
        "aaData": [
            /* Reduced data set */
            ["NA"]

        ],
				        "aoColumns": "N"    } ).fnFilterOnReturn();





} );

</script>

<div id="RNAcontainer" style='display:none;'>
			<h1>Picard - CollectRnaSeqMetrics.
			<a href="http://picard.sourceforge.net/picard-metric-definitions.shtml#RnaSeqMetrics">(homepage)</a>
			</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>
			<div class="spacer"></div>
			<div class="spacer"></div>
			<div id="dynamic2"></div>
			<div class="spacer"></div>
			<div class="spacer"></div>
			<div id="container3" style="height: 300px"></div>
			<div class="spacer"></div>
			<div class="spacer"></div>
			<div id="dynamic3"></div>
			<div class="spacer"></div>
			<div class="spacer"></div>
			<div id="container4" style="height: 300px"></div>
			<div id="container5" style="height: 300px"></div>
</div>
			<!--<button onclick="myFunction()">Try it</button>-->
			  </body>
